<template>
<div class="">
    <div class="pr10">
        <div class="analyItem">
            <p class="analyItemTit tx-center">状态</p>
            <div class="analyItemCon">
                <p class="col-md-4">&nbsp;</p>
                <p class="col-md-4" v-if="leftInfo !== undefined">
                    <el-switch v-model="open" active-text="开启" inactive-text="关闭" @change="openOrColse()" ></el-switch>
                </p>
            </div>
        </div>
    </div>
    <div class="thinScroll pr10" v-scrollHeight="87">
        <router-link tag="div" :to="routerPath('settingThree')" class="analyItem anItemBor" active-class="anItemBor-active" v-if="leftInfo !== undefined">
            <p class="analyItemTit tx-center">{{item.content | truncate(4)}}</p>
            <div class="analyItemCon">
                <div class="flex">
                    <div class="fl mr20">
                        <rx-viewer :images="data">
                            <div class="clearfix">
                                <div class="col-md-4">
                                    <img :src="item.standardImgurl | smallImg(60, 60)">
                                </div>
                            </div>
                        </rx-viewer>
                    </div>
                    <div class="col-md-8 clearfix">
                        <textarea class="col-md-12 pl5 pt5" v-model="item.standard" readonly></textarea>
                    </div>
                </div>
            </div>
        </router-link>
    </div>
    <div class="pr10">
        <router-link tag="div" :to="routerPath('hander')" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">处理</p>
            <div class="analyItemCon">
            </div>
        </router-link>
    </div>
</div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import { getItemById, openItem, closeItem } from '../Resources/Api/index'
export default {
    data () {
        return {
            data: [],
            delFlag: '', // 状态
            id: '',
            item: {},
            open: false // 开启、关闭
        }
    },
    created () {
        this.getItemById()
    },
    computed: {
        ...mapGetters(['leftInfo', 'twoToThreeInfo', 'userInfo'])
    },
    methods: {
        ...mapMutations({
            setUpDatePlate: `SET_UPDATE_PLATE`
        }),
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 直接进行路由跳转路径
        routerPush (path) {
            this.$router.push(this.$route.matched[1].path + '/' + path)
        },
        getItemById () {
            if (this.leftInfo !== undefined) {
                if (this.leftInfo.delFlag === 0) {
                    this.open = true
                } else {
                    this.open = false
                }
                this.id = this.leftInfo.id
                let params = {
                    key: this.id
                }
                // 查询服务项科目
                getItemById(params).then(results => {
                    if (results.data.StatusCode === 1) {
                        this.item = results.data.Body.item
                    }
                }).catch(error => {
                    console.log(error)
                })
            }
        },
        openOrColse () {
            let params = {
                id: this.id,
                userNo: this.userInfo.as_cardNo,
                userName: this.userInfo.as_fullName
            }
            if (this.open) {
                openItem(params).then(results => {
                    if (results.data.StatusCode === 1) {
                        this.setUpDatePlate()
                    }
                }).catch(error => {
                    console.log(error)
                })
            } else {
                closeItem(params).then(results => {
                    if (results.data.StatusCode === 1) {
                        this.setUpDatePlate()
                    }
                }).catch(error => {
                    console.log(error)
                })
            }
        }
    },
    watch: {
        leftInfo () {
            this.getItemById()
        }
    }
}
</script>
<style lang="scss">
    .analyItemCon p.lineH62{
        line-height: 62px;
    }
</style>
